<template>
    <el-form :model="detailForm" ref="detailForm" label-position="left">
        <el-card class="box-card">
            <div slot="header" class="header-card">
                <span class="header-card-title">违章预警配置</span>
            </div>
            <el-row >
                <el-col :span="24" class="col-wrap">
                    <el-switch v-model="detailForm.illegalMsgEnable"></el-switch>
                    <el-form-item label-width="180px" label="违章短信通知推送规则:" prop="illegalMsgRate" class="text-day"
                                  :rules="{
                                         required: detailForm.illegalMsgEnable,
                                         message: '请选择违章短信通知推送规则',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, detailForm.illegalMsgRate, callback)
                                       }">
                        <el-select filterable v-model="detailForm.illegalMsgRate" clearable
                                   style="width: 100%">
                            <el-option label="实时通知" :value="1" :key="1"></el-option>
                            <el-option label="1天" :value="2" :key="2"></el-option>
                            <el-option label="3天" :value="3" :key="3"></el-option>
                            <el-option label="5天" :value="4" :key="4"></el-option>
                            <el-option label="7天" :value="5" :key="5"></el-option>
                            <el-option label="15天" :value="6" :key="6"></el-option>
                            <el-option label="一个月" :value="7" :key="7"></el-option>
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="24" class="col-wrap">
                    <el-switch v-model="detailForm.customeSetEnable"></el-switch>
                    <el-form-item label-width="180px" label="自定义配置" class="text-day">
                    </el-form-item>
                </el-col>

                <el-col :span="24" class="col-wrap" style="margin-left: 30px" v-for="(item, index) in detailForm.companyList" :key="index">
                    <el-form-item label-width="90px" label="公司名称:" prop="companyName" class="text-day"
                                  :rules="{
                                         required: detailForm.customeSetEnable,
                                         message: '请选择公司名称',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, item.companyName, callback)
                                       }">
                        <el-select filterable v-model="item.companyName" clearable
                                   style="width: 350px">
                            <template v-for="(item, index) in companyDataList">
                                <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>
                            </template>
                        </el-select>

                    </el-form-item>

                    <el-form-item label-width="200px" label="违章短信通知推送规则:" prop="illegalRule" class="text-day"
                                  :rules="{
                                         required: detailForm.customeSetEnable,
                                         message: '请选择违章短信通知推送规则',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, item.illegalRule, callback)
                                       }">
                        <el-select filterable v-model="item.illegalRule" clearable
                                   style="width: 100%">
                            <el-option label="实时通知" :value="1" :key="1"></el-option>
                            <el-option label="1天" :value="2" :key="2"></el-option>
                            <el-option label="3天" :value="3" :key="3"></el-option>
                            <el-option label="5天" :value="4" :key="4"></el-option>
                            <el-option label="7天" :value="5" :key="5"></el-option>
                            <el-option label="15天" :value="6" :key="6"></el-option>
                            <el-option label="一个月" :value="7" :key="7"></el-option>
                        </el-select>
                    </el-form-item>

                    <i class="el-icon-circle-plus-outline icon_add" v-if="index===detailForm.companyList.length-1"
                       @click="add(index, 0)"></i>
                    <i v-else class="el-icon-remove-outline icon_add"
                       @click="sub(index, 0)"></i>
                </el-col>

            </el-row>
        </el-card>


    </el-form>
</template>

<script>
import {v1 as uuid_v1} from "uuid";
import {listDept} from "@/api/system/dept";

export default {
    name: "IllegalWarning",
    data() {
        return {
            detailForm: {
                companyList:[{}],
            },
            companyDataList:[]
        };
    },
    created() {
        this.getBelongCompany()
    },

    methods: {

        getBelongCompany() {
            listDept(
                {
                    deptType: '2',//组织类型（1部门 2公司）
                    // regionId: this.form.cityId,//所在城市（省市区id）
                }).then(res => {
                this.companyDataList = res.data
            })
        },
        add(index, type){
            this.detailForm.companyList.splice(index + 1, 0, {})

            this.$forceUpdate()
        },
        sub(index, type) {
            this.detailForm.companyList.splice(index, 1)

            this.$forceUpdate()
        },
        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.box-card{
    margin-bottom: 15px;
}

.col-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: flex-start;
}

.text-day {
    margin-left: 10px;
    font-size: 14px;
}

.el-form-item--small.el-form-item {
    margin-bottom: 0 !important;
}

.icon_add{
    cursor: pointer;
    margin-left: 10px;
}

</style>
